<!DOCTYPE html>
<html ng-app> <!-- ng-app:声明angular管理的区域 -->
	<head>
	<base />
		<meta charset="UTF-8">
		<title>Example - 购物车</title>
		<script src="../angularJS/angular.js"></script>
	</head>
<body ng-controller='CartController'> <!-- ng-controller:声明控制器 -->
	<h1>你的购物车货单：</h1>
	<div ng-repeat='item in items'>
		<span>{{item.title}}</span> 
		<input ng-model='item.quantity' /> 
		<span>单价：</span>
		<span>{{item.price  | currency }}</span>  <!-- currency:内置函数，用于格式化金钱 -->
		<span>总价：</span>
		<span>{{item.price * item.quantity | currency}}</span>
		<button ng-click="remove($index)">移除</button>  <!-- $index：当前要删除的迭代序号，从0开始 -->
	</div>
	<script> 
	function CartController($scope) { // $scope就是用于把数据绑定到界面上的元素的
		////@formatter:off 
		$scope.items = [{ 
			title : '油漆桶', 
			quantity : 8, 
			price : 3.95 
		}, { 
			title : '油漆刷子', 
			quantity : 17, 
			price : 12.95 
		}, { 
			title : '防护手套', 
			quantity : 5,
			price : 6.95 
		}]; 
		//@formatter:on 
		$scope.remove = function(index) { 
			$scope.items.splice(index, 1); 
		}; 
	} 
	</script>
</body>
</html>